<div class="bidask-wrapper">
    <div class="header" *ngIf="!stockStopt">
        <span class="entrust-rate no-wrap">
    委比:<span [ngClass]="{'text-color-red': entrustRate > 0, 'text-color-green': entrustRate < 0}">
    {{entrustRate}}%
    </span>
        </span>
        <span class="pull-right no-wrap">
      委差:<span [ngClass]="{'text-color-red': entrustDiff > 0, 'text-color-green': entrustDiff < 0}">
    {{entrustDiff | optimizeUnit}}
    </span>
        </span>
    </div>
    <div class="header" *ngIf="stockStopt">
        委比:--
        <span class="pull-right">
      委差:--
    </span>
    </div>
    <table class="bidask-table" *ngIf="stockInfo && stockInfo.ask && stockInfo.ask.length === 5 && !stockStopt" [class.vtrade-table]="place==='vtrade'">
        <tr class="clickable" (click)="handleClick(stockInfo.ask[4-i], 0)" *ngFor="let ask of stockInfo.ask; let i = index">
            <th>卖<span class="text-with-bg text-blue-bg space-left">{{5 - i}}</span></th>
            <td class="text-number" [ngClass]="getPriceColor(stockInfo.ask[4-i].price)">{{stockInfo.ask[4-i].price | toFixed}}</td>
            <td class="legend-cell">
                <span class="legend color-green" [style.width]="getLegendWidth(stockInfo.ask[4-i].amount, stockInfo.ask.concat(stockInfo.bid))"></span>
            </td>
            <td class="text-color-blue">{{stockInfo.ask[4-i].amount}}</td>
        </tr>
        <tr class="clickable divider" *ngFor="let bid of stockInfo.bid; let i = index" [class.divider]="i === 0" (click)="handleClick(bid, 1)">
            <th>买<span class="space-left text-with-bg text-red-bg">{{i+1}}</span></th>
            <td class="text-number" [ngClass]="getPriceColor(bid.price)">{{bid.price | toFixed}}</td>
            <td class="legend-cell">
                <span class="legend color-red" [style.width]="getLegendWidth(bid.amount, stockInfo.ask.concat(stockInfo.bid))"></span>
            </td>
            <td class="text-color-blue">{{bid.amount}}</td>
        </tr>
    </table>
    <table class="bidask-table" *ngIf="stockStopt">
        <tr class="clickable" (click)="handleClick(ask, 0)" *ngFor="let ask of stockInfo.ask; let i = index">
            <th>卖<span class="text-with-bg text-blue-bg space-left">{{5 - i}}</span></th>
            <td class="text-number">--</td>
            <td class="legend-cell">
                <span class="legend color-green" [style.width]="0"></span>
            </td>
            <td class="text-color-blue">--</td>
        </tr>
        <tr class="clickable divider" *ngFor="let bid of stockInfo.bid; let i = index" [class.divider]="i === 0" (click)="handleClick(bid, 1)">
            <th>买<span class="space-left text-with-bg text-red-bg">{{i+1}}</span></th>
            <td class="text-number">--</td>
            <td class="legend-cell">
                <span class="legend color-red" [style.width]="0"></span>
            </td>
            <td class="text-color-blue">--</td>
        </tr>
    </table>
</div>